<template>
    <div class="activity-index">
    	<el-form :inline="true" >
					<el-form-item label="订单ID">
						<el-input v-model="orderId" placeholder="请输入订单ID"></el-input>
					</el-form-item>
					<el-form-item label="取货码">
						<el-input v-model="pickUpCode" placeholder="请输入取货码"></el-input>
					</el-form-item>
					<el-form-item label="收货人">
						<el-input v-model="name" placeholder="请输入收货人"></el-input>
					</el-form-item>
					<el-form-item label="手机号">
						<el-input v-model="phone" placeholder="请输入手机号"></el-input>
					</el-form-item>
					<el-form-item label="寝室号">
						<el-input v-model="dormNumber" placeholder="请输入寝室号"></el-input>
					</el-form-item>
          <el-form-item label="快递公司">
            <el-select  placeholder="请选择快递公司"  v-model="expressId" >
							<el-option label="请选择" value="" ></el-option>
              <el-option :key="item.expressId" v-for="item of companys" :label="item.name" :value="item.expressId" ></el-option>
            </el-select>
          </el-form-item>
					<el-form-item label="管理员">
						<el-select  placeholder="请选择管理员"  v-model="adminId" >
							<el-option label="请选择" value="" ></el-option>
							<el-option v-for="item of adminList" :key="item.userId" :label="item.name" :value="item.userId"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="状态">
						<el-select  placeholder="请选择状态"  v-model="status" >
							<!-- 1等待配送 2正在配送 3配送完成 4配送取消 -->
							<el-option label="请选择" value="" ></el-option>
							<el-option label="等待配送" value="1"></el-option>
							<el-option label="正在配送" value="2"></el-option>
							<el-option label="配送完成" value="3"></el-option>
							<el-option label="配送取消" value="4"></el-option>
						</el-select>
					</el-form-item>
					
					
          <el-form-item label="排序字段">
            <el-select  placeholder="请输选择排序字段"  v-model="order">
							<el-option label="请选择" value="" ></el-option>
              <el-option label="浏览数" value="1"></el-option>
              <el-option label="发布时间" value="0"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div class="query">
              <el-button type="primary" @click="startQuery">查询</el-button>
        </div>
        <el-table :data="expressOrder" style="width: 100%">
            <el-table-column label="#" 
                             type="index"
                            :index="indexStart">
            </el-table-column>

            <el-table-column label="快递公司" prop="express.name">
            </el-table-column>
            <el-table-column label="取货码" prop="pickUpCode">
            </el-table-column>
            <el-table-column label="收件人" prop="name">
            </el-table-column>
            <el-table-column label="手机号" prop="phone" width="150">
            </el-table-column>
            <el-table-column label="寝室号" prop="dormNumber">
            </el-table-column>
						<el-table-column label="备注" prop="userDesc">
						</el-table-column>
						<el-table-column label="状态" prop="statusStr">
							<template slot-scope="scope">
								<div style="color: #03a9f4;" v-if="scope.row.status==1">{{scope.row.statusStr}}</div>
								<div style="color: #f44336;" v-if="scope.row.status==2">{{scope.row.statusStr}}</div>
								<div style="color: #4caf50;" v-if="scope.row.status==3">{{scope.row.statusStr}}</div>
								<div style="color: #607d8b;" v-if="scope.row.status==4">{{scope.row.statusStr}}</div>
							</template>
						</el-table-column>
						<el-table-column label="管理员" >
							<template slot-scope="scope">
								{{scope.row.adminUser?scope.row.adminUser.name:''}}
							</template>
						</el-table-column>
            <el-table-column label="申请时间" prop="createDate" width="100">
            </el-table-column>
            <el-table-column label="操作" prop="desc" width="160">
                <template slot-scope="scope">
                    <el-button
                      size="mini"
                      type="primary"
                      @click="showOrderDetailModel(scope.$index, scope.row)">查看</el-button>
										<el-button
											size="mini"
											type="info"
											v-if="scope.row.status!=4"
											@click="showOrderCancelModel(scope.$index, scope.row)">取消</el-button>
                </template>
            </el-table-column>
        </el-table>

        <div class="pages">
            <el-pagination
              background
              @size-change="pageSizeChange"
              @current-change="pageCurrentChange"
              :current-page="pageNum"
              :page-sizes="[10, 50, 100, 200]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
            </el-pagination>
        </div>
				<!-- 输入取消理由 -->
				<el-dialog
					title="请输入取消理由"
					:visible.sync="cancelModel"
					width="30%"
					:before-close="handleCloseCancelModel">
					<el-form label-position="left" label-width="80px" >
					  <el-form-item label="取消理由">
							<el-input type="textarea" v-model="cancelDesc"></el-input>
						</el-form-item>
					</el-form>
					<span slot="footer" class="dialog-footer">
						<el-button @click="cancelModel = false">取 消</el-button>
						<el-button type="primary" @click="orderCancel">确 定</el-button>
					</span>
				</el-dialog>
				
				<!-- 查看订单并且配送 -->
				<el-dialog
					title="快递订单详细"
					:visible.sync="orderDetailModel"
					width="30%"
					:before-close="handleCloseorderDetailModel"
					v-if="obj!=null">
					<el-form label-position="left" label-width="80px" >
						<el-form-item label="订单号">
							<el-input v-model="obj.orderId" disabled></el-input>
						</el-form-item>
						<el-form-item label="快递公司">
							<el-select v-model="obj.expressId" placeholder="请选择快递公司">
								<el-option :key="item.expressId" v-for="item of companys" :label="item.name" :value="item.expressId" ></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="取货码">
							<el-input v-model="obj.pickUpCode"></el-input>
						</el-form-item>
						<el-form-item label="收件人">
							<el-input v-model="obj.name"></el-input>
						</el-form-item>
						<el-form-item label="手机号">
							<el-input v-model="obj.phone"></el-input>
						</el-form-item>
						<el-form-item label="寝室号">
							<el-input v-model="obj.dormNumber"></el-input>
						</el-form-item>
						<el-form-item label="状态">
							<el-input v-model="obj.statusStr" disabled></el-input>
						</el-form-item>
						<el-form-item label="管理员">
							<el-input v-model="obj.adminUser.name" v-if="obj.adminUser!=null" disabled></el-input>
							<el-input v-if="obj.adminUser==null" disabled></el-input>
						</el-form-item>
						<el-form-item label="用户备注">
							<el-input v-model="obj.userDesc" v-if="obj.userDesc!=null" disabled></el-input>
							<el-input v-if="obj.userDesc==null" disabled></el-input>
						</el-form-item>
						<el-form-item label="取消理由">
							<el-input v-model="obj.cancelDesc" disabled></el-input>
						</el-form-item>
						<el-form-item label="申请时间">
							<el-input v-model="obj.createDate" disabled></el-input>
						</el-form-item>
					</el-form>
					<span slot="footer" class="dialog-footer">
						<el-button @click="updateOrder">修 改</el-button>
						<el-button type="primary" @click="orderDistribution" v-if="obj.status==1">配 送</el-button>
						<el-button type="success" @click="orderSuccess" v-if="obj.status==2">完 成</el-button>
					</span>
				</el-dialog>
    </div>
</template>
<script>
// @ 是 /src 的别名
export default {
    name: 'ExpressOrderIndex',
    props: {

    },
    data() {
        return {
            expressOrder: [],
						companys: [],
						adminList: [],
						obj:null,
						pageNum:1,
						pageSize:10,
						total:0,
						order:'',
						
						orderId:'',
						expressId:'',
						adminId:'',
						pickUpCode:'',
						name:'',
						phone:'',
						dormNumber:'',
						status:'' ,
						
						cancelDesc:'',
						
						cancelModel:false,
						orderDetailModel: false
        }
    },
		created: function() {
			this._getExpressOrder()
			this._getCategory()
			this._getAdminList()
		},
		computed: {
			indexStart() {
				return this.pageNum*this.pageSize - this.pageSize+1
			}
		},
    methods: {
      detail(index, obj) {
        this.$router.push("/notice/detail/"+obj.noticeId);
      },
			_getExpressOrder() {
				let _this = this
				this.expressOrder  = []
				this.axios.get('/admin/expressOrder/list?pageNum='+this.pageNum+'&pageSize='+this.pageSize
												+"&orderId="+this.orderId+"&expressId="+this.expressId+"&adminId="+this.adminId
												+"&pickUpCode="+this.pickUpCode+"&name="+this.name+"&phone="+this.phone
												+"&dormNumber="+this.dormNumber+"&status="+this.status)
				.then(function(response) {
					console.log("快递订单")
					console.log(response.data)
					let data  = response.data
					_this.expressOrder = data.data.list
					_this.total = data.data.total
				});
			},
			_getCategory() {
				this.axios.get('/client/express/list')
				.then((res)=>{
					console.log("快递公司")
					console.log(res.data)
					this.companys = res.data
				})
			},
			_getAdminList() {
				this.axios.get('/admin/user/adminList')
				.then((res)=>{
					console.log("平台管理员")
					console.log(res.data)
					this.adminList = res.data.data.list
				})
			},
			pageSizeChange(pageSize) {
				this.pageNum = 1
				this.pageSize = pageSize
				this._getExpressOrder()
			},
			pageCurrentChange(pageNum) {
				this.pageNum = pageNum
				this._getExpressOrder()
			},
			startQuery() {
				this.pageNum = 1
				this._getExpressOrder()
			},
			// 取消配送
			orderCancel() {
				// <!-- 1等待配送 2正在配送 3配送完成 4配送取消 -->
				let statusArr = ["等待配送","正在配送","配送完成","配送取消",]
				this.axios.get('/admin/expressOrder/orderCancel?expressOrderId='+this.obj.orderId+'&cancelMsg='+this.cancelDesc)
				.then((res)=>{
					if(res.data.status==200) {
						this.$notify({
							title: '操作成功',
							message: '配送已取消',
							type: 'success'
						});
						this.obj.status = 4
						this.obj.statusStr= statusArr[3]
						this.obj.cancelDesc=this.cancelDesc
						this.cancelModel = false
					}else {
						this.$notify({
							title: '操作失败',
							message: res.data.message,
							type: 'error'
						});
					}
						
				})
			},
			//配送快递
			orderDistribution() {
				// <!-- 1等待配送 2正在配送 3配送完成 4配送取消 -->
				let statusArr = ["等待配送","正在配送","配送完成","配送取消"]
				this.axios.get('/admin/expressOrder/orderDistribution?expressOrderId='+this.obj.orderId)
				.then((res)=>{
					if(res.data.status==200) {
						this.$notify({
							title: '已接受配送',
							message: '请前往宿舍进行配送',
							type: 'success'
						});
						this.obj.status = 2
						this.obj.statusStr= statusArr[1]
						this.obj.adminUser={name:JSON.parse(localStorage.getItem("userInfo")).name}
						this.orderDetailModel = false
					}
					else{
						this.$notify({
							title: '操作失败',
							message: res.data.message,
							type: 'error'
						});
					}
				})
			},
			// 配送完成
			orderSuccess() {
				// <!-- 1等待配送 2正在配送 3配送完成 4配送取消 -->
				let statusArr = ["等待配送","正在配送","配送完成","配送取消"]
				this.axios.get('/admin/expressOrder/orderSuccess?expressOrderId='+this.obj.orderId)
				.then((res)=>{
					if(res.data.status==200) {
						this.$notify({
							title: '配送完成',
							message: '一分耕耘一分收获',
							type: 'success'
						});
						this.obj.status = 3
						this.obj.statusStr= statusArr[2]
						this.orderDetailModel = false
					}
					else{
						this.$notify({
							title: '操作失败',
							message: res.data.message,
							type: 'error'
						});
					}
				})
			},
			// 更新订单详细
			updateOrder() {
				this.axios.get('/admin/expressOrder/updateOrder?orderId='+this.obj.orderId+'&expressId='+this.obj.expressId
												+'&pickUpCode='+this.obj.pickUpCode+'&name='+this.obj.name+'&phone='+this.obj.phone
												+'&dormNumber='+this.obj.dormNumber)
				.then((res)=>{
					if(res.data.status==200) {
						this.$notify({
							title: '修改成功',
							message: '订单详细已更新',
							type: 'success'
						});
						this.obj.adminUser={name:JSON.parse(localStorage.getItem("userInfo")).name},
						 
						this.companys.forEach((item,index)=>{
							if(this.obj.expressId==item.expressId) {
								this.obj.express = item
								return ;
							}
						})
						this.orderDetailModel = false
					}
					else{
						this.$notify({
							title: '操作失败',
							message: res.data.message,
							type: 'error'
						});
					}
				})
			},
			// 关闭模态框
			handleCloseCancelModel() {
				this.cancelModel = false
			},
			handleCloseorderDetailModel() {
				this.orderDetailModel = false
			},
			// 打开模态框，记录操作对象
			showOrderCancelModel(index,obj) {
				this.obj = obj
				this.cancelModel = true;
			},
			showOrderDetailModel(index,obj) {
				this.obj = obj
				this.orderDetailModel = true;
			},
			
    }
}
</script>
<style scoped lang="styl">

.top
  position absolute
  top 0
  left 0
  font-size 8px
  color #fff
  padding 0 8px
  background #f32

.query
    display flex
    justify-content flex-end
    margin 0 58px 20px 0 
.pages
    display flex
    justify-content flex-end
    margin-top 20px
</style>